<template>
  <div class="container">
    <van-form ref='form'>
      <van-nav-bar title="会议详情"
                   left-text="返回"
                   left-arrow
                   @click-left="backPrePage">
      </van-nav-bar>

      <div class="white-bg-2">
        <div class="meet-detail">
          <img :src="point" class="img-point">
          <div class="meet-title"> 会议主题</div>
        </div>
        <van-divider
            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        />
        <div class="time-shell">
          <div class="meet-time"> 13:00</div>&nbsp;&nbsp;&nbsp;
          <div class="sum-time"> 30分钟</div>
          <div class="meet-time2"> 13:30</div>
        </div>

        <div class="date-shell">
          <div class="meet-date"> 01月17日</div>&nbsp;&nbsp;&nbsp;
          <div class="week"> 周一</div>
        </div>
        <div class="date-shell2">
          <div class="meet-date2"> 01月17日</div>
          <div class="week2"> 周一</div>
        </div>
        <van-divider
            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        />
        <div class="meet-bell">
          <img :src="bell" class="img-bell">
          <div class="meet-bell"> 15分钟前，应用提醒</div>
        </div>
      </div>
      <div class="meet-inner">
        <img :src="inner" class="img-inner">
        <div class="meet-inner"> 参会议室：5201 会议室</div>
      </div>
      <div class="meet-inner">
        <img :src="lca" class="img-inner">
        <div class="meet-inner"> 具体地点：北京市通州区亦庄经济技术开发区经海三路137号</div>
      </div>
      <div class="meet-inner">
        <img :src="phone24h" class="img-inner">
        <div class="meet-inner"> 联系方式：137xxxxxxxx</div>
      </div>

      <div class="meet-type">
        <img :src="type" class="img-type">
        <div class="my-type">会议类型：</div>
        <van-radio-group class="my-radio" disabled v-model="meetData.meetType" direction="horizontal">
          <van-radio name="1">线上</van-radio>
          <van-radio name="2">室内</van-radio>
        </van-radio-group>
      </div>

      <div class="meet-summary">
        <van-field
            :left-icon="notebook"
            v-model="meetData.meetSummary"
            rows="1"
            autosize
            label="会议概要："
            type="textarea"
            placeholder=""
            maxlength="500"
            show-word-limit
        />
      </div>

    </van-form>
  </div>
</template>

<script>
import SelectMultiple from "../../components/SelectMultiple";
import VanFieldCheckbox from "../../components/VanFieldCheckbox";
import Util from "../../utils/utils";

export default {
  name: "MeetMain",
  components: {SelectMultiple, VanFieldCheckbox},
  data() {
    return {
      point: require('@/assets/icon/point.png'),
      bell: require('@/assets/icon/bell.png'),
      inner: require('@/assets/icon/inner.png'),
      lca: require('@/assets/icon/lca.png'),
      phone24h: require('@/assets/icon/24gl-phone24h.png'),
      notebook: require('@/assets/icon/notebook.png'),
      type: require('@/assets/icon/type.png'),
      meetData: {
        meetTitle: '', //会议主题
        timeValue: '2021年12月20日',
        timeArray: [],//会议时间
        meetType: '1',//会议类型
        manArray: [],// 选中参会人员集合
        meetPlace: '',  //会议室部分
        address: '',//联系方式
        meetSummary: '会议的主要内容,本次会议核心思想围绕xxx展开!', //会议概要
      },
    }
  },
  async mounted() {
  },
  methods: {
    backPrePage() {
      this.$router.go(-1);
    },
    myReserve() {

    },
  }
}
</script>

<style lang="less" scoped>
.my-radio {
  padding-left: 8%;
}

.meet-summary {
  margin-top: 2%;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 25%;
}

/deep/ .van-icon__image {
  margin-left: -8px;
  width: 42px;
  height: 25px;
  object-fit: contain;
}

/deep/ .van-field__label {
  font-size: 15px;
  margin-left: -2%;
}

/deep/ .van-field__control {
  margin-left: -21%;
}
/deep/ .van-field__control {
  padding-left: 8%;
}


.week {
  padding-top: 2%;
}

.week2 {
  margin-left: 5%;
  margin-top: -22px;
}

.date-shell {
  display: flex;
  font-size: 15px;
}

.date-shell2 {
  display: flex;
  font-size: 15px;
}

.meet-date {
  font-size: 15px;
  margin-top: 2%;
  margin-left: 5%;
}

.meet-date2 {
  font-size: 15px;
  margin-top: -6%;
  margin-left: 61%;
}

.meet-time2 {
  padding-left: 22%;
}

.my-type {
  padding-left: 2%;
  padding-top: 2%;
}

.sum-time {
  background-color: #f4f4f4;
  font-size: 15px;
  height: 30px;
  //width: 50px;
  padding-left: 2%;
  padding-top: 2%;
  border-radius: 21%;
  margin-left: 15%;
  margin-top: 2%;
}

.meet-bell {
  padding-left: 1%;
  display: flex;
  font-size: 15px;
}

.meet-type {
  height: 40px;
  background-color: #fff;
  margin-top: 2%;
  display: flex;
  font-size: 15px;
  border-radius: 5%;
  margin-left: 2%;
  margin-right: 2%;
}

.meet-inner {
  background-color: #fff;
  margin-top: 2%;
  display: flex;
  font-size: 15px;
  border-radius: 5%;
  margin-left: 2%;
  margin-right: 2%;
}

.meet-detail {
  display: flex;
}

.img-point {
  margin-top: 5%;
  height: 20px;
  width: 20px;
  margin-left: 5%;
}

.img-bell {
  height: 20px;
  width: 20px;
  margin-left: 5%;
}

.img-inner {
  margin-top: 2%;
  height: 20px;
  width: 20px;
  margin-left: 5%;
}

.img-type {
  margin-top: 2%;
  height: 20px;
  width: 20px;
  margin-left: 5%;
}

.img-notebook {
  margin-top: 2%;
  height: 20px;
  width: 20px;
  margin-left: 5%;
}

.container {
  height: 100vh;
  width: 100vw;
  background-color: #f4f4f4;
}

.white-bg-2 {
  margin-top: 2%;
  background-color: #ffffff;
  border-radius: 5%;
  margin-left: 2%;
  margin-right: 2%;
}

.meet-title {
  padding-top: 3%;
  padding-left: 5%;
  font-size: 20px;
}

.time-shell {
  display: flex;
  padding-left: 10%;
  display: flex;
  font-size: 15px;
  padding-top: 2%;
  //color: darkgrey;
}

.meet-shell {
  padding-left: 3%;
  color: darkgrey;
  padding-top: 2%;
  font-size: 15px;
}

.meet-place {
  padding-left: 3%;
  color: darkgrey;
  padding-top: 2%;
  font-size: 15px;
}

.inline {
  display: flex;
  color: #1989fa;
  font-size: 15px;
  margin-top: -3%;
}

.my-order {
  padding-left: 10%;
}

.my-order-cance {
  padding-left: 5%;
  color: darkgrey;
}

.my-call {
  padding-left: 12%;
}

.my-detail {
  padding-left: 15%;
}

</style>
